<template>
  <el-dialog :visible.sync="showDialog" class="type-select">
    <template #title>
      选择主体类型
      <a
        href="https://kf.qq.com/faq/180910IBZVnQ180910naQ77b.html"
        target="__bank"
        class="link"
      >
        选择主体指引
      </a>
    </template>
    <div class="type-list">
      <div
        class="type-list-item"
        v-for="(item, index) in enterpriseTypeList"
        :key="index"
      >
        <h3>{{ item.dataName }}</h3>
        <p>{{ item.describe }}</p>
        <el-button
          type="primary"
          size="mini"
          class="btn"
          @click="selectType(item)"
        >
          选择
        </el-button>
      </div>
    </div>
  </el-dialog>
</template>
<script>
const enterpriseTypeList = [
  {
    dataName: '企业',
    dataValue: '2',
    describe: '营业执照上的主体类型有限公司、有限责任公司'
  },
  {
    dataName: '个体工商户',
    dataValue: '4',
    describe: '营业执照上的主体类型一般为个体户、个体工商户、个体经营'
  },
  {
    dataName: '小微商户',
    dataValue: '2401',
    describe: '无营业执照的个人商家'
  },
  {
    dataName: '个人卖家',
    dataValue: '2500',
    describe:
      '无营业执照，已持续从事电子商务经营活动满6个月，且期间经营收入累计超过20万元的个人商家'
  },
  {
    dataName: '事业单位',
    dataValue: '3',
    describe:
      '国内各类事业单位，如：医疗、教育、学校等单位。'
  },
  {
    dataName: '政府机关',
    dataValue: '2502',
    describe:
      '各级、各类政府机关，如机关党委、税务、民政、人社、工商、商务、市监等'
  },
  {
    dataName: '社会组织',
    dataValue: '1708',
    describe:
      '包括社会团体、民办非企业、基金会、基层群众性自治组织、农村集体经济组织等组织'
  }
]
export default {
  name: 'TypeSelect',
  enterpriseTypeList,
  data() {
    return {
      showDialog: false,
      enterpriseTypeList
    }
  },
  methods: {
    show() {
      this.showDialog = true
    },
    selectType(item) {
      this.$emit('confim', item.dataValue)
      this.showDialog = false
    }
  }
}
</script>
<style lang="scss" scoped>
.type-select {
  .link {
    color: #1890ff;
    font-size: 14px;
  }
  .type-list {
    overflow: hidden;
    text-align: center;
    .type-list-item {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      width: 220px;
      height: 220px;
      margin: 20px;
      padding: 20px 10px;
      border-radius: 10px;
      transition: all 0.3s;
      box-shadow: 0px 0px 3px 0px #ddd;
      h3 {
        margin: 10px;
      }
      p {
        flex: 1;
        text-align: justify;
      }
      .btn {
        width: 60px;
      }
      &:hover {
        box-shadow: 0px 4px 10px 2px #ddd;
        transform: translate(0px, -2px);
      }
    }
  }
}
</style>
